<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript" src="layui/layui.js" ></script>
		<style>
			body{
				background: white;
			}
			.mui-content{
				background: white;
			}
			.mui-bar-nav{
		    	background: #53C8F4;
		    	
		    }
		    .mui-bar-nav h1{
		    	color: white;
		    }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav top-header" style="line-height: 35px;">
		    <h1 class="mui-title">我的申请</h1>
		</header>
		<div class="mui-content">
		    <ul id="listarea" class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media">
					<a class='mui-navigate-right' id="baoxiu" href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="images/baoxiu.png">
						<div class="mui-media-body">
							报修申请
							<p class='mui-ellipsis'>点击查看我的申请</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class='mui-navigate-right' href="javascript:;" id="ruzhu">
						<img class="mui-media-object mui-pull-left" src="images/ruzhu.png">
						<div class="mui-media-body">
							入住申请
							<p class='mui-ellipsis'>点击查看我的申请</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class='mui-navigate-right' href="javascript:;" id="tuisu">
						<img class="mui-media-object mui-pull-left" src="images/tuisu.png">
						<div class="mui-media-body">
							退宿申请
							<p class='mui-ellipsis'>点击查看我的申请</p>
							
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class='mui-navigate-right' href="javascript:;" id="yajin">
						<img class="mui-media-object mui-pull-left" src="images/yajin.png">
						<div class="mui-media-body">
							押金申请
							<p class='mui-ellipsis'>点击查看我的申请</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class='mui-navigate-right' href="javascript:;" id="jiaozu">
						<img class="mui-media-object mui-pull-left" src="images/zujin.png">
						<div class="mui-media-body">
							交租申请
							<p class='mui-ellipsis'>点击查看我的申请</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">

			var userInfo = JSON.parse(localStorage.getItem("userInfo"));
			mui.init();
			layui.use(['layer'],function() {
				$("#baoxiu").click(function() {
					if(userInfo!=null) {
						openNewPage("myApply.html?id=1","baoxiu");
					} else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
				});
				$("#ruzhu").click(function() {
					if(userInfo!=null) {
						openNewPage("myApply.html?id=2","ruzhu");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
					
				});
				$("#tuisu").click(function() {
					if(userInfo!=null) {
						openNewPage("myApply.html?id=3","tuisu");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
					
				});
				$("#yajin").click(function() {
					if(userInfo!=null) {
						openNewPage("myApply.html?id=4","yajin");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
					
				});
				$("#jiaozu").click(function() {
					if(userInfo!=null) {
						openNewPage("myApply.html?id=5","jiaozu");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
				
				});
				
			});
			
			/*封装打开新页面函数*/
			function openNewPage(url1,idname) {
				mui.openWindow({
				    url:url1,
				    id:idname,
				    styles:{
				      top:0,//新页面顶部位置
				      bottom:0//新页面底部位置
				    },
				    extras:{
				      id:1		//自定义扩展参数，可以用来处理页面间传值
				    },
				    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
				    show:{
				      autoShow:true//页面loaded事件发生后自动显示，默认为true
				      /*aniShow:slide-in-right,//页面显示动画，默认为”slide-in-right“；
				      duration:100*///页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
				    },
				    waiting:{
				      autoShow:true,//自动显示等待框，默认为true
				      title:'正在加载...',//等待对话框上显示的提示内容
				      options:{
				       /* width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
				        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
				        ......*/
				      }
				    }
				});
			}
			
		</script>
	</body>

</html>